<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            /* 
                使图片可以自动切换
            */
           //获取img标签
           var img=document.getElementById("img1"); 
           //创建一个数组来保存图片的路径
           var imgArr=["../mi/img/banner1.webp","../mi/img/banner2.webp","../mi/img/banner3.webp","../mi/img/banner4.jpg "];
           //创建一个变量
           var index=0;
           //定义一个变量，用来保存定时器的标识
           var timer;
           var btn01=document.getElementById("btn01");
           btn01.onclick=function(){
            /* 
            目前我们点击一次按钮，就会开启一个定时器
            点击多次就开启多个定时器，而且我们只能关闭最后一次开启的定时器
            
            */
           //在开启定时器之前，需要将当前元素上的其他定时器关闭
           clearInterval(timer);

            /* 
            开启一个定时器，来自动切换图片
            */
           timer=setInterval(() => {
               //使索引自增
               index++;
               //判断索引是否超过最大索引
            //    if(index>=imgArr.length){
            //        index=0;
            //    }

            index=index%imgArr.length;
               //修改img1的src属性
               img.src=imgArr[index];
           }, 1000);

           };
           //为btn02绑定一个单击响应函数
           var btn02=document.getElementById("btn02");
           btn02.onclick=function(){
               //点击按钮以后，停止图片的自动切换，关闭定时器
               /* 
                clearInterval()可以接收任意参数
                如果参数是一个有效的标识，则停止对应的定时器
                如果参数不是一个有效的标识，则什么也不做
               */
               clearInterval(timer);
           }
            


        }
    </script>
</head>
<body>
    <img id=img1 src="../mi/img/banner1.webp">
    <br> <br>
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
</body>
</html>